<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心灵笔触</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/logout.js"></script>
    <script src="js/urlutis.js"></script>

    <style>
        .container-right input {
            margin-left: 10px;
            width: 300px;
            height: 30px;
            line-height: 40px;
            font-size: 16px;
            border-radius: 10px;
            border: 0.5px solid;
            outline: none;
            text-indent: 10px;
        }

        .btn1-style {
            background-color: rgb(34, 177, 156);
            color: white;
            border: none;
            padding: 8px 12px;
            font-size: 14px;
            border-radius: 10px;
            cursor: pointer;
        }
    </style>


</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo3.jpg" alt="">
        <span class="title">心灵笔触</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="reader_list2.html">返回</a>
        <a href="admin_search.html">搜索</a>
        <!-- <a href="javascript:logout()">注销</a> -->
        <a href="javascript:logout()">退出</a>
    </div>
    <!-- 版心 -->
    <div class="container">

        <!-- 右侧内容详情 -->
        <div id="artListDiv" class="container-right" style="margin-left: 10%">
            <!-- <div class="blog">
                <div class="title">《西游记》</div>
                <div class="date">2023-12-6</div>
                <div class="desc">诗曰：混沌未分天地乱，茫茫渺渺无人见。自从盘古破鸿濛，开辟从兹清浊辨。覆载群生仰至仁，发明万物皆成善。欲知造化会元功，须看《西游释厄传》</div>
                <a href="blog_content.html?aid=1" class="detail">查看全文 &gt;&gt;</a>
                <a href="blog_content.html?aid=1" class="detail">写评论 &gt;&gt;</a>
            </div><br>
            <div>
                <h3 style="font-size: 16px;padding-left: 10px;">陈平安：写得不错！</h3>
                <h3 style="font-size: 16px;padding-left: 10px;">作者 回复：有手就行</h3>
                <input type="text" id="reply"> <button class="btn1-style" onclick="doReply(this)">回复</button>
                <br><br>
            </div>
            <div>
                <h3 style="font-size: 16px;padding-left: 10px;">222：写得不错！</h3>
                <h3 style="font-size: 16px;padding-left: 10px;">作者 回复：有手就行</h3>
                <input type="text" id="reply"> <button class="btn1-style" onclick="doReply(this)">回复</button>
                <br><br>    
            </div> -->
        </div>

    </div>

    <script type="text/javascript">

        var aid = getParamValue("aid");

        // 初始化页面（根据文章 id 先得到文章信息）
        function init() {
            // 1. 效验参数
            // if (aid == null || aid <= 0) {
            //     alert("参数有误！");
            //     return false;
            // }
            // 2. 请求后端获得数据
            jQuery.ajax({
                url: "/art/discuss",
                type: "GET",
                data: {
                    "aid": aid
                },
                success: function (res) {
                    // 3. 将数据展示到前端
                    if (res.code == 200 && res.data != null) {
                        // 拼接
                        var art = res.data.art;
                        var discuss = res.data.discuss;
                        var createHtml = "";
                        createHtml += '<div class="blog" >';
                        createHtml += '<div class="title">' + art.title + '</div>';
                        createHtml += '<div class="date">' + art.createtime + '</div>';
                        createHtml += '<div class="desc">' + art.content + '</div>';
                        createHtml += '<a href="blog_content.html?aid=' + art.id
                            + '" class="detail" >查看全文 &gt;&gt;</a>';
                        createHtml += '<a href="blog_add2.html?aid=' + art.id + '"class="detail">写评论 &gt;&gt;</a>';
                        createHtml += '</div><br>';
                        createHtml += '<h2 style="padding-left:10px;font-size: 18px;">评论区：</h2><br>';
                        if (discuss.length > 0) {
                            for (var i = 0; i < discuss.length; i++) {
                                var dis = discuss[i];
                                for (var i = 0; i < discuss.length; i++) {
                                    createHtml += '<div>';
                                    createHtml += '<h3 style="font-size: 16px;padding-left: 10px;">' + discuss[i].user + '：' + discuss[i].discuss + '</h3>';
                                    for (var j = 0; j < discuss[i].replyList.length; j++) {
                                        createHtml += '<h3 style="font-size: 16px;padding-left: 10px;">' + discuss[i].replyList[j].user + ' 回复：' + discuss[i].replyList[j].reply + '</h3>';
                                    }
                                    createHtml += '<input type="text" id="reply"> <button class="btn1-style" onclick="doReply(this)">回复</button>';
                                    createHtml += '<br><br>';
                                    createHtml += '<div>';
                                }
                            }
                        }
                        if (discuss.length == 0) {
                            createHtml += '<h3 style="font-size: 16px;padding-left: 10px;">还没有评论，去发表评论吧! </h3>';
                        }
                        jQuery("#artListDiv").html(createHtml);
                    }

                }
            })
        }
        init();

        //回复评论功能
        function doReply(button) {
            var reply = jQuery(button).prevAll("input[type='text']").eq(0);
            var user = jQuery(button).siblings("h3").eq(0).text().split("：")[0]; // 获取评论人的名字
            var discuss = jQuery(button).siblings("h3").eq(0).text().split("：")[1];
            if (reply.val().trim() == "") {
                alert("还没输入回复内容哦");
                return false;
            }
            // alert(user);
            // alert(discuss)
            // alert(reply.val());
            jQuery.ajax({
                url:"/art/doreply",
                type:"POST",
                data:{
                    "reply":reply.val(),
                    "toUser":user,
                    "discuss":discuss
                },
                success:function(res) {
                    if(res.code == 200 && res != null) {
                        alert("成功回复" + user + "的评论");
                        location.href = location.href;
                    }else if(res.code == -2){
                        alert("请先登录！");
                        location.href = "login.html";
                    }else{
                        alert("回复失败，" + res.msg);
                    }
                }
            })
        }

    </script>
</body>

</html>